var sixcircleimgs = document.getElementById("six-circle-imgs"),
	middle = document.getElementById("middle"),
	next = document.getElementById("next"),
	prev = document.getElementById("prev"),
	buttonimg1 = document.getElementById("button-img1"),
	buttonimg2 = document.getElementById("button-img2"),
	buttonimg1s = document.querySelectorAll("#button-img1>div"),
	buttonimg2s = document.querySelectorAll("#button-img2>div");
	var w = sixcircleimgs.offsetWidth;
	middle.style.width = w*6 + 'px';
	var page = 0;
	var timer = null;
	var finditfond = document.getElementById("find-it-font");
	buttonimg2s[0].style.opacity = 1;
	//文字切换
	var arrfont = ["<p>给钱包戴上<br />钱包不丢</p>","<p>给宠物戴上<br />宠物不丢</p>","<p>给钥匙戴上<br />钥匙不丢</p>","<p>给包包戴上<br />包包不丢</p>","<p>给相机戴上<br />相机不丢</p>","<p>给电脑戴上<br />电脑不丢</p>"]
	finditfond.innerHTML = arrfont[0];
	function roll(){
		page++;
		if(page > buttonimg1s.length-1){
			page = 0;
		}
		finditfond.innerHTML = arrfont[page];
		middle.style.left = -w * page + 'px';
		for (var i=0;i<buttonimg1s.length;i++) {
			buttonimg2s[i].style.opacity = 0;
		}
		buttonimg2s[page].style.opacity = 1;
	}
	function autoroll(){
		clearInterval(timer);
		timer = setInterval(function(){
			roll();
		},3000);
	}
	autoroll();
	next.onclick = function(){
		roll();
	}
	prev.onclick = function(){
		page--;
			//设置从头开始
			if(page<0){
				page = buttonimg1s.length - 1;
			}
		finditfond.innerHTML = arrfont[page];
		middle.style.left = -w*page + "px";
		for (var i=0;i<buttonimg1s.length;i++) {
			buttonimg2s[i].style.opacity = 0;
		}
		buttonimg2s[page].style.opacity = 1;
	}
	sixcircleimgs.onmouseenter = function(){
		clearInterval(timer);
	}
	sixcircleimgs.onmouseleave = function(){
		autoroll();
	}
	//点击图标跳转相应图片
	for (var i=0;i<buttonimg2s.length;i++) {
		buttonimg2s[i].index = i;
		buttonimg2s[i].onclick = function(){
			middle.style.left = -w * this.index + 'px';
			for (var j=0;j<buttonimg1s.length;j++) {
			buttonimg2s[j].style.opacity = 0;
			}
			buttonimg2s[this.index].style.opacity = 1;
			finditfond.innerHTML = arrfont[this.index];
		}
	}
	//轮播图二
	var threecircleimgs1 = document.querySelectorAll("#three-circle-imgs1>div"),
	threecircleimgs2 = document.querySelectorAll("#three-circle-imgs2>div"),
	circlewrap = document.getElementById("circle-wrap"),
	circlemiddle = document.getElementById("circle-middle"),
	next1 = document.getElementById("next1"),
	prev1 = document.getElementById("prev1");
	
	var w1 = circlewrap.offsetWidth;
//	circlemiddle.style.width = 3*w1 + 'px';
	threecircleimgs2[0].style.opacity = 1;
	var page1 = 0;
	var timer1 = null;
	function roll1(){
		page1++;
		if(page1 > threecircleimgs1.length-1){
			page1 = 0;
		}
		circlemiddle.style.left = -w1 * page1 + 'px';
//		console.log(circlemiddle.style.left);
		for (var i=0;i<threecircleimgs1.length;i++) {
			threecircleimgs2[i].style.opacity = 0;
		}
		threecircleimgs2[page1].style.opacity = 1;
	}
	function autoroll1(){
		clearInterval(timer1);
		timer1 = setInterval(function(){
			roll1();
		},3000);
	}
	autoroll1();
	next1.onclick = function(){
		roll1();
	}
	prev1.onclick = function(){
		page1--;
			//设置从头开始
			if(page1<0){
				page1 = threecircleimgs1.length - 1;
			}
		circlemiddle.style.left = -w1*page1 + "px";
		for (var i=0;i<threecircleimgs1.length;i++) {
			threecircleimgs2[i].style.opacity = 0;
		}
		threecircleimgs2[page1].style.opacity = 1;
	}
	circlewrap.onmouseenter = function(){
		clearInterval(timer1);
	}
	circlewrap.onmouseleave = function(){
		autoroll1();
	}
	